<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>
    <title th:text="|${textWhole.title}的审核页面|"></title>
    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/style2.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/commit.css}">
    <script th:src="@{/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">

    <!--   回显需要的-->
    <link rel="shortcut icon" th:href="@{https://pandao.github.io/editor.md/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/editormd.min.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.preview.css}">

    <!--  回显必须加的js-->
    <script th:src="@{/lib/marked.min.js}"></script>
    <script th:src="@{/lib/prettify.min.js}"></script>
    <script th:src="@{/lib/raphael.min.js}"></script>
    <script th:src="@{/lib/underscore.min.js}"></script>
    <script th:src="@{/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/lib/flowchart.min.js}"></script>
    <script th:src="@{/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/js/editormd.js}"></script>

    <style>
        .card1 {
            position: relative;
            width: 200px;
            height: 250px;
            border-radius: 14px;
            z-index: 1111;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;;
        }

        .bg {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 190px;
            height: 240px;
            z-index: 2;
            background: rgba(255, 255, 255, .95);
            backdrop-filter: blur(24px);
            border-radius: 10px;
            overflow: hidden;
            outline: 2px solid white;
        }

        .blob {
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #ff0000;
            opacity: 1;
            filter: blur(12px);
            animation: blob-bounce 5s infinite ease;
        }

        @keyframes blob-bounce {
            0% {
                transform: translate(-100%, -100%) translate3d(0, 0, 0);
            }

            25% {
                transform: translate(-100%, -100%) translate3d(100%, 0, 0);
            }

            50% {
                transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
            }

            75% {
                transform: translate(-100%, -100%) translate3d(0, 100%, 0);
            }

            100% {
                transform: translate(-100%, -100%) translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body>
<!-- Header -->
<div id="header">
    <div class="shell">
        <!-- Logo + Top Nav -->
        <div id="top">
            <h1><a href="#">Echo Blog后台</a></h1>
            <div id="top-navigation">
                欢迎 <a href="#"><strong>管理员</strong></a>
                <span>|</span>
                <a href="#">帮助</a>
                <span>|</span>
                <a href="#">设置</a>
                <span>|</span>
                <a href="#">退出</a>
            </div>
        </div>
        <!-- End Logo + Top Nav -->

        <!-- 导航 -->
        <div id="navigation">
            <ul>
                <li><a th:href="@{/system/books?currentPage=1}" class="active"><span>返回</span></a></li>
            </ul>
        </div>
        <!-- End Main Nav -->
    </div>
</div>
<div class="container " style="width: 90%">
    <div class=" mt-5 p-3" style="border: 1px solid; background-color: #f1f3f4">
        <div class="row">
            <div id="title">
                <h3>
                    <span>题目:</span>
                    <span id="sessionT" th:text="${textWhole.title}"></span>
                </h3>
            </div>
        </div>
        <br/>
        <h5 id="subtitle" style="margin: 0 auto;">
            <span>摘要：</span>
            <span th:text="${textWhole.subtitle}"></span>
        </h5>

        <p>
            <span>时间：</span>
            <span id="time" class="small" th:text="${textWhole.createdate}">博客时间</span>
            <!--            <span>分类：</span>-->
            <!--            <span class="small" th:text="${textWhole.cid}">分类</span>-->
            <!--            <span class="small" th:text="${textWhole.mid}">分类</span>-->
        </p>

        <div id="test-editormd-view" style="margin: 0 auto">
          <textarea id="editormd-name" name="test-editormd-markdown-doc">
          </textarea>
        </div>
    </div>

</div>

<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
<script th:inline="javascript">
    $(document).ready(function () {

        /**
         * 返回
         */
        // $('#return').click(function () {
        //     window.location.href = "/blog/intoMain";
        // });
        /**
         * 尝试 通过传入参数到后端 记录id值
         */
        let m;
        //1.第一种显示文章的方式
        let testEditormdView;
        // let title = document.getElementById("sessionT").innerText;
        // console.log("异步回显 标题" + title)
        var markdownContent = /*[[${textWhole.content}]]*/ '';
        editormd.markdownToHTML("test-editormd-view", {
            // 从数据库里得到数据
            markdown: markdownContent,
            htmlDecode: "style,script,iframe",
            tocm: true,
            width: "80%",
            tex: true,
            emoji: true,
            taskList: true,
            flowChart: true,
            sequenceDiagram: true
        });

        // });
    });

</script>
</body>

</html>
